<template>
  <view class="item_box">
    <view class="item_checkbox">
      <nut-checkbox v-model="item.checked"></nut-checkbox>
    </view>
    <view class="item_contain_c"  @click="gotoPage(item)">
      <view class="tick-content">
        <view class="tick_h">
          <view class="tick_header">
            <view class="test">
              <image src="@/assets/images/orderTracking/icon_jijiandan.png"></image>
              <view class="text">承运单号：{{ item.billNo }}</view>
            </view>
            <view class="right" :class="{ status_active: item.wxStatus == 4 || item.wxStatus == 6 }">{{ item.statusVal }}</view>
          </view>
          <view class="tick_address">
            <image src="@/assets/images/orderTracking/kapian_icon_fahuodi.png"></image>
            <view class="text">{{ item.shipper }}</view>
            <view class="text1">{{ item.toProvince }}{{ item.toFromCity }}</view>
          </view>
          <view class="tick_address">
            <image src="@/assets/images/orderTracking/icon_shoujiandan.png"></image>
            <view class="text">{{ item.receiver }}</view>
            <view class="text1">{{ item.fromProvince }}{{ item.fromCity }}</view>
          </view>
          <view class="tick_goods">
            <view class="top">
              <view class="left">货物信息：</view>
              <view class="right">{{ goodsInfoString(item) }}</view>
            </view>
            <view class="top">
              <view class="left">下单时间：</view>
              <view class="right">{{
                  dayjs(item.creaTetime).format("YYYY-MM-DD HH:mm:ss")
                }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="tick-foot">
        <view class="foot_left">待付款：¥{{ pendingPrice }}</view>
        <view class="foot_right">
          <view class="btn_zf" @click.stop="gotoPay(item)">立即支付</view >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { OrderListType } from "@/pages/orderTracking/listType";
// import useOrderStore from '@/store/order';
import dayjs from "dayjs";
import Taro, { env } from "@tarojs/taro";
import { reset } from "../sendGoods/reset";
import useMyOrderStore from "@/store/myOrder";
import useUserInfoStore from "@/store/user";
import useTransactionStore,{transaction} from "@/store/pickUp";
import {computed, defineEmits, ref} from "vue";
import {getPoorderByBillNo} from "@/@api";
import logisticsInfoStore from "@/store/logistics";
import useSendGoodsStore from "@/store/sendGoods";
const order = useMyOrderStore();
const userStore = useUserInfoStore();
const transactionStore = useTransactionStore();
const logisticsStore = logisticsInfoStore()
const props = defineProps<{
  item: OrderListType;
}>();
const item = props.item;

const pendingPrice =  computed(()=>{
  let p = 0
  item.costList.forEach((cost) => {
    p = p + (cost.actualMoney - cost.paidMoney)
  })
  return p.toFixed(2)
})
const emit = defineEmits([])


function gotoPage(item) {
  order.orderList = item;
  Taro.navigateTo({
    url: "/pages/myOrder/order",
  });
}
function onceAgin() {
  reset();
  Taro.navigateTo({
    url: "/pages/sendGoods/index",
  });
}
//跳转支付
function gotoPay(item) {
  order.payList = [item];
  Taro.removeStorageSync('payOrderId')
  Taro.navigateTo({
    url: "/pages/pay/index",
  });
}
function goodsInfoString(item) {
  let goods = "";
  item.goodsInfo.forEach((it) => {
    goods =
        goods +
        it.goodsName +
        it.goodsNumber +
        "件," +
        it.weigh +
        "Kg," +
        it.goodsVolume +
        "m³," +
        it.packing +
        ";";
  });
  return goods;
}
// const orderStore = useOrderStore()

function statuTrans(item) {
  if (item == 1) {
    return "待确认";
  } else if (item == 2) {
    return "待支付";
  } else if (item == 3) {
    return "未发货";
  } else if (item == 4) {
    return "运输中";
  } else if (item == 5) {
    return "待签收";
  } else if (item == 6) {
    return "已完成";
  }
}
</script>

<style lang="scss">

.item_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .item_checkbox {
    width: 60rpx;
    box-sizing: border-box;
    padding-top: 24rpx;
    padding-left: 24rpx;
    --nut-primary-color: #0966ff;
  }
  .item_contain_c {
    width: calc(100% - 60rpx);
    .tick_h {
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      .tick_header {
        width: 100%;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .test {
          display: flex;
          align-items: center;

          image {
            width: 24rpx;
            height: 24rpx;
          }

          .text {
            font-family: PingFang SC;
            font-size: 22rpx;
            margin-left: 24rpx;
            color: #252525;
          }
        }

        .status_active {
          background: rgba(9, 102, 255, 0.16) !important;
          color: #0966ff !important;
        }

        .right {
          width: 96rpx;
          height: 40rpx;
          border-radius: 8rpx;
          background: rgba(255, 143, 31, 0.16);
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFang SC;
          font-size: 24rpx;
          color: #ff8f1f;
        }
      }

      .tick_address {
        width: 100%;
        height: 40rpx;

        margin-top: 24rpx;
        display: flex;
        align-items: center;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: 700;
        color: #252525;

        image {
          width: 40rpx;
          height: 40rpx;
        }

        .text {
          margin-left: 24rpx;
        }

        .text1 {
          margin-left: 24rpx;
        }
      }

      .tick_goods {
        width: 100%;
        border-radius: 8px;
        background: #f5f5f5;
        margin-top: 24rpx;
        padding: 24rpx;
        box-sizing: border-box;

        .top {
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          color: #666666;
          display: flex;
          align-items: center;
          margin-bottom: 24rpx;
          width: 100%;
          &:last-child {
            margin-bottom: 0;
          }

          .left {
            margin-right: 24rpx;
            width: 120rpx;
          }

          .right {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: calc(100% - 144rpx);
          }
        }
      }
    }
    .tick-foot {
      width: 100%;
      height: 90rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 24rpx;
      box-sizing: border-box;

      .foot_left {
        font-size: 28rpx;
        color: #ff8f1f;
        z-index: 1;
      }

      .foot_right {
        display: flex;
        align-items: center;
      }
    }

    .blue {
      color: #0966ff !important;
    }

    .red {
      color: #fa5151 !important;
    }

    .yellow {
      color: #ff8a00 !important;
    }

    .btn_zf {
      font-size: 24rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 144rpx;
      height: 56rpx;
      border: 1rpx solid #0966ff;
      border-radius: 72rpx;
      white-space: nowrap;
      color: #0966ff;
      background-color: #fff;
    }

    .tick-content {
      height: 345rpx;
      width: 100%;
      box-sizing: border-box;
      padding: 24rpx 24rpx 24rpx 0;
    }

    .tick-content-two {
      margin-left: 10rpx;
      width: 93%;
    }

    .tick-content-three {
      margin-left: 10rpx;
      width: 93%;
      height: 60rpx;
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
    }

    .tick-content-one {
      margin-left: 10rpx;
      width: 93%;
      display: flex;
      justify-content: space-between;
      align-content: center;
      height: 100rpx;
      margin-bottom: 10rpx;

      .tick-content-one-text {
        width: 150rpx;
        height: 70rpx;

        .zhuantai {
          width: 150rpx;
          line-height: 70rpx;
          height: 24rpx;
          font-size: 30rpx;
          font-weight: bold;
          text-align: center;

          image {
            height: 10rpx;
            width: 160rpx;
          }
        }

        .tick-content-one-text-top {
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 30rpx;
          font-weight: bold;
          white-space: nowrap;
        }

        .tick-content-one-text-bottom {
          width: 100%;
          height: 35rpx;
          line-height: 50rpx;
          font-size: 20rpx;
          color: #999999;
        }
      }
    }

    .orderList {
      box-sizing: border-box;
      background: white;
      margin-bottom: 16rpx;
      border-radius: 16rpx;

      margin-top: 24rpx;
    }
  }

}




</style>
